<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东</title>
		<style>
			.search-container {
			        display: flex;
			        align-items: center;
			        border: 1px solid #ccc; /* 搜索框外边框 */
			        border-radius: 4px; /* 边框圆角 */
			        overflow: hidden; /* 隐藏溢出部分 */
			    }
			
			    .search-input {
			        border: none; /* 去除输入框的边框 */
			        outline: none; /* 去除聚焦时的轮廓 */
			        padding: 8px; /* 输入框内边距 */
			        flex-grow: 1; /* 输入框占据剩余空间 */
			        background-color: #fff; /* 输入框背景颜色 */
			    }
			
			    .search-button {
			        background-color: #f44336; /* 按钮背景颜色 */
			        color: white; /* 按钮文字颜色 */
			        border: none; /* 去除按钮边框 */
			        padding: 8px 16px; /* 按钮内边距 */
			        cursor: pointer; /* 鼠标悬停时的指针样式 */
			    }
			
			    .search-button:hover {
			        background-color: #d32f2f; /* 按钮悬停时的背景颜色 */
			    }
		</style>
	</head>
	<body>
		<div class="search-container">
		        <input type="text" class="search-input" placeholder="搜索 京东商品">
		        <button class="search-button">搜索</button>
		    </div>
	</body>
</html>